<template>
	<view class="js-search-bar-fixed" :style="{ top: `${topNav ? NavBar.height : NavBar.top}px` }">
		<view class="js-search-box" v-if="jstyle === 1">
			<image @click.stop="handleSearch" class="search-img" src="@/static/images/search.png" mode="aspectFill"></image>
			<input v-if="navTo" @click="toNav(navTo)" :disabled="true" placeholder="请输入关键词搜索" placeholder-class="pls" />
			<input
				v-else
				:value="value"
				@input="$emit('input', $event.target.value)"
				:focus="isFocus"
				confirm-type="search"
				@confirm="handleSearch"
				type="text"
				placeholder="请输入关键词搜索"
				placeholder-class="pls"
			/>
			<view class="closebox j-active" @click.stop="clear">
				<u-icon v-if="value" name="close-circle-fill" hoverClass=""></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'js-search-bar',
	props: {
		fixed: { type: Boolean, default: true },
		navTo: { type: Boolean | String, default: false },
		topNav: { type: Boolean, default: false },
		isFocus: { type: Boolean, default: false },
		isClear: { type: Boolean, default: false },
		jstyle: { type: Number, default: 1 },
		history: { type: Boolean, default: false },
		value: { type: String, default: '' }
	},
	data() {
		return {
			NavBar: this.$store.state.NavBar
			// value: ''
		};
	},
	watch: {
		value(e) {
			if (!e) {
				if (!this.isClear) {
					this.handleSearch();
				}
			}
		}
	},
	created() {},
	mounted() {},
	onLoad(data) {},
	methods: {
		handleActiveInp(flag) {
			switch (flag) {
				case 0:
					uni.navigateTo({
						url: '/pages/select/select'
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/select/selectAddress'
					});
					break;
				case 2:
					this.$emit('openSelect');
					break;
				default:
					break;
			}
		},

		goSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		handleSearch() {
			if (this.navTo) {
				this.toNav(this.navTo);
				return;
			}
			if (this.history)this.save(this.value);
			this.$emit('search', this.value);
		},
		clear() {
			this.$emit('clear');
		},
		save(value) {
			if (value.length > 0) {
				let tmp = uni.getStorageSync('searchRecord') || [];
				if (tmp.indexOf(value) !== -1) return;
				tmp = [...tmp, value];
				uni.setStorageSync('searchRecord', tmp);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.js-search-bar-fixed {
	position: sticky;
	z-index: 155;
	.flex-center();
	height: 88rpx;
	padding: 0 24rpx;
	background: #ffffff;
}

.js-search-box {
	display: flex;
	align-items: center;
	// width: 686rpx;
	// .bor();
	width: 100%;
	height: 72rpx;
	padding: 0 90rpx;
	background: #eff1f6;
	border-radius: 36rpx 36rpx 36rpx 36rpx;

	.closebox {
		.fix-c-y();
		right: 60rpx;
	}
	.search-img {
		.fix-c-y();
		left: 60rpx;
		width: 38rpx;
		height: 38rpx;
		&:active {
			opacity: 0.5;
			margin-top: 1px;		}
	}
	.close-img {
		.fix-c-y();
		right: 60rpx;
		width: 25rpx;
		height: 25rpx;
		&:active {
			opacity: 0.5;
		}
	}
	input {
		flex: 1;
		font-size: 26rpx;
	}
	.pls {
		font-size: 24rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #698a95;
	}
}
</style>
